<template>
  <!-- 品牌详情-关联视频88/89 -->
  <div id="associatedVideo">
    <div class="vip_pay_box" v-if="!vipRootObj[88][89].owner">
      <div class="vip_bg_box">
        <div class="vip_bg_mask"></div>
      </div>
      <div class="vip_box_wrap">
        <payVip
          routerName="FansPortrait"
          :lowestVipNum="vipRootObj[88][89].ownerMinLevel"
        />
      </div>
    </div>
    <div v-else>
      <div class="top">
        <radio_group01
          :radio_values="['近7天', '30天', '90天']"
          v-model="KindName"
          class="tab01"
        />
        <div class="optionsBox">
          <el-date-picker
            class="long_time"
            v-model="liveTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            prefix-icon="el-icon-arrow-down"
            unlink-panels
            :clearable="false"
            :picker-options="pickeroptions"
            value-format="yyyy-MM-dd"
            @change="onPick1"
          ></el-date-picker>
        </div>
      </div>
      <div class="header">
        <div class="line"></div>
        <span>关联视频数据</span>
      </div>
      <div class="video_Data">
        <div class="video_box">
          <p>视频总销量</p>
          <p>{{ format_num(volume) }}</p>
        </div>
        <div class="video_box">
          <p>视频总销售额</p>
          <p>{{ format_num(amount) }}</p>
        </div>
      </div>
      <div class="header">
        <div class="line"></div>
        <span>视频列表</span>
      </div>
      <table class="table">
        <thead>
          <tr>
            <th>视频内容</th>
            <th>达人</th>
            <th @click="sort_fun(false, 4)" v-if="orderType == 0 && sort == 4">
              视频销量
              <img src="@/assets/meng/down_up.png" />
            </th>
            <th v-else @click="sort_fun(true, 4)">
              视频销量
              <img
                src="@/assets/meng/up_down.png"
                v-if="orderType == 1 && sort == 4"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th @click="sort_fun(false, 5)" v-if="orderType == 0 && sort == 5">
              视频销售额
              <img src="@/assets/meng/down_up.png" />
            </th>
            <th v-else @click="sort_fun(true, 5)">
              视频销售额
              <img
                src="@/assets/meng/up_down.png"
                v-if="orderType == 1 && sort == 5"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th @click="sort_fun(false, 1)" v-if="orderType == 0 && sort == 1">
              点赞数
              <img src="@/assets/meng/down_up.png" />
            </th>
            <th v-else @click="sort_fun(true, 1)">
              点赞数
              <img
                src="@/assets/meng/up_down.png"
                v-if="orderType == 1 && sort == 1"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th @click="sort_fun(false, 2)" v-if="orderType == 0 && sort == 2">
              评论数
              <img src="@/assets/meng/down_up.png" />
            </th>
            <th v-else @click="sort_fun(true, 2)">
              评论数
              <img
                src="@/assets/meng/up_down.png"
                v-if="orderType == 1 && sort == 2"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th @click="sort_fun(false, 3)" v-if="orderType == 0 && sort == 3">
              转发数
              <img src="@/assets/meng/down_up.png" />
            </th>
            <th v-else @click="sort_fun(true, 3)">
              转发数
              <img
                src="@/assets/meng/up_down.png"
                v-if="orderType == 1 && sort == 3"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in vidio" :key="i + 'a'">
            <td>
              <div class="goodsBox">
                <div
                  @mouseover="appear(i)"
                  @mouseout="mouseLeave"
                  class="goodsBoxImg"
                >
                  <div class="img_box">
                    <img
                      :src="item.thumPic"
                      class="leftImg"
                      v-if="item.isDelete == 0"
                      v-errorImg:video
                    />
                    <img
                      src="@/assets/shi/diteil6.png"
                      alt
                      v-else
                      class="detail"
                    />
                    <a :href="item.url" target="_blank">
                      <img
                        v-show="show && ind == i"
                        src="@/assets/meng/play.png"
                        class="play"
                      />
                    </a>
                  </div>
                </div>
                <div
                  class="rightBox"
                  @click="
                    dialog = false;
                    active_name01 = '0';
                    video_id = item.awemeId;
                    Routinghop(item.awemeId);
                  "
                >
                  <div>
                    <p v-if="item.isDelete == 0" class="overflowTextWl">
                      {{ item.title }}
                    </p>
                    <button v-else class="del_btn">已删除或隐藏</button>
                  </div>
                  <div class="rightBox-1">
                    <p>发布时间 :</p>
                    <p>{{ item.releaseTime }}</p>
                  </div>
                  <div class="rightBox-1 rightBox-01" v-if="item.isAweme == 1">
                    <p style="width: 125px">关联商品 :</p>
                    <p class="goods-text" @click="goodsdetails(item.proId)">
                      {{ item.proTitle[0] }}
                    </p>
                    <div class="position" v-if="item.proTitle.length > 1">
                      <img
                        v-if="menu == i"
                        @click="menulist(null)"
                        src="@/assets/meng/xsjt.png"
                        alt
                        class="menu"
                      />
                      <img
                        v-if="menu != i"
                        @click="menulist(i)"
                        src="@/assets/li/menu.png"
                        alt
                        class="menu"
                      />
                      <ul v-if="menu == i" class="goodslist">
                        <li
                          v-for="(itemcon, ind) in item.proTitle"
                          :key="ind + 'z'"
                          @click="goodsdetails(item.proId)"
                        >
                          {{ itemcon }}
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </td>
            <td>
              <div>
                <img
                  :src="item.logo"
                  alt=""
                  @click="talentdetails(item.authorId)"
                />
                <p class="title" @click="talentdetails(item.authorId)">
                  {{ item.nickName }}
                </p>
              </div>
            </td>
            <td>{{ format_num(item.volume) }}</td>
            <td>{{ format_num(item.amount) }}</td>
            <td>{{ format_num(item.favoriteCount) }}</td>
            <td>{{ format_num(item.commentCount) }}</td>
            <td>{{ format_num(item.shareCount) }}</td>
          </tr>
        </tbody>
      </table>

      <div
        v-loading="loading"
        v-if="loading"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <div class="pageBox" v-if="!loading && vidio.length != 0">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="count"
          :page-size="30"
          :current-page="page"
          :hide-on-single-page="true"
          @current-change="getlive"
        ></el-pagination>
      </div>
      <div class="empty addTop" v-show="!loading && vidio.length == 0">
        <img src="@/assets/liu/zw.png" />
        <p>暂无数据</p>
      </div>
      <pop
        class="poppad"
        v-if="dialog"
        v-model="dialog"
        :id="video_id"
        :index="active_name01"
      />
    </div>
  </div>
</template>

<script>
import pop from "@/pages/meng/video/pop";
export default {
  data() {
    return {
      // 箭头
      menu: null,
      ind: "",
      loading: false,
      dialog: false,
      vidio: [],
      video_id: "", //弹出窗
      active_name01: "1",
      show: false, //控制显示播放按钮
      orderType: "0", //0倒序  1升序
      sort: "0",
      page: 1,
      count: 0,
      startDate: "",
      endDate: "",
      KindName: "30天",
      liveTime: [],
      // 选择时间 不可选的日期
      pickeroptions: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 90 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          ); // 返回 所有时间 大于 当前时间
        },
      },
      vipRootObj: this.$store.state.userRoot, //会员权限对象
      volume: 0,
      amount: 0,
    };
  },
  components: {
    pop,
  },
  computed: {},
  watch: {
    KindName: function (newVal, oldVal) {
      if (newVal) {
        this.page = 1;
        this.vidio = [];
        this.getlive();
      }
    },
  },
  created() {
    if (this.vipRootObj[88][89].owner) {
      this.getlive();
    }
  },
  methods: {
    menulist(i) {
      this.menu = i;
    },
    //商品詳情
    goodsdetails(id) {
      this.menu = null;
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/0`,
      });
      window.open(router.href, "_blank");
    },
    // 达人详情
    talentdetails(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/0`,
      });
      window.open(router.href, "_blank");
    },
    onPick1() {
      this.KindName = "";
      this.vidio = [];
      this.page = 1;
      this.getlive();
    },

    //鼠标滑入
    appear(i) {
      this.ind = i;
      this.show = true;
    },
    //鼠标离开
    mouseLeave() {
      this.show = false;
    },
    // 排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.orderType = 0;
      } else {
        this.orderType = 1;
      }
      this.sort = parm02;
      this.page = 1;
      this.vidio = [];
      this.getlive();
    },
    // 数据
    getlive(i) {
      this.vidio = [];
      if (i) {
        this.page = i;
        this.backTop();
      }
      this.loading = true;
      switch (this.KindName) {
        case "近7天":
          this.endDate = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 7,
            "Y-M-D"
          );
          break;
        case "30天":
          this.endDate = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 30,
            "Y-M-D"
          );

          break;
        case "90天":
          this.endDate = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 90,
            "Y-M-D"
          );
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
      this.liveTime = [this.startDate, this.endDate];
      //
      this.$axios
        .post("/api/Brand/BrandRelAweme ", {
          // brandId: "7f80fca6eb2cb2c4e975c2f4817fa8cb",
          BrandId: this.$route.query.id,
          star_time: this.startDate,
          end_time: this.endDate,
          page: this.page,
          size: 30,
          sort: this.sort,
          order_by: this.orderType,
        })
        .then((res) => {
          this.loading = false;
          if (res.data.code == 0) {
            this.vidio = res.data.data.bra;
            this.amount = res.data.data.awemeSumAmount;
            this.volume = res.data.data.awemeSumVolume;
            this.count = res.data.count;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },

    // 跳转路由
    Routinghop(id) {
      let router = this.$router.resolve({
        path: "/talent_main/videoDetails",
        query: { id },
      });
      window.open(router.href, "_blank");
    },
  },
};
</script>

<style lang="less" scoped>
#associatedVideo {
  .el-dialog__body {
    padding: 30px 20px !important;
  }

  .del_btn {
    width: 100px;
    height: 26px;
    background-color: #f5f5f5;
    border-radius: 4px;
    border: solid 1px #e5e5e5;
    text-align: center;
    font-size: 14px;
    color: #888888;
    line-height: 22px;
    margin-right: 10px;
    vertical-align: 1px;
  }
  height: 83vh;
  overflow: auto;
  background-color: #fff;
  border-radius: 6px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  letter-spacing: 1px;
  padding-bottom: 14px;
  position: relative;
  .top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    .tab01 {
      margin-right: 20px;
    }
  }

  .sort {
    width: 4px;
    height: 10px;
    margin-block: 2px;
  }
  .header {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0px;
    color: #222222;

    span {
      display: inline-block;
      line-height: 28px;
    }
    .line {
      width: 4px;
      height: 16px;
      border-radius: 100px;
      margin-right: 6px;
      background-color: #fd7f2c;
    }
  }
  .video_Data {
    display: flex;
    margin: 20px 0 40px 0;
    .video_box {
      width: 354px;
      height: 50px;
      background-color: #f5f5f5;
      border-radius: 6px;
      margin-right: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      p:nth-child(1) {
        font-size: 14px;
        font-weight: normal;
        color: #888888;
      }
      p:nth-child(2) {
        font-size: 18px;
        font-weight: 600;
        color: #222222;
      }
    }
  }
  table {
    overflow-x: auto;
    margin-top: 20px;
    width: 100%;

    thead {
      tr {
        width: 100%;
        position: relative;
        th {
          cursor: pointer;
        }
        th:nth-of-type(1) {
          // width: 45%;
          text-align: left;
          text-indent: 28px;
        }
        th:nth-of-type(2) {
          text-align: left;
          padding-left: 10px;
        }
      }
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
      }
    }
    tbody {
      tr {
        height: 78px;
        text-align: center;
        td:nth-of-type(2),
        td:nth-of-type(3),
        td:nth-of-type(4),
        td:nth-of-type(5),
        td:nth-of-type(6),
        td:nth-of-type(7) {
          font-family: DINAlternate-Bold;
          font-size: 16px;
          color: #222222;
        }
        td:nth-of-type(2) {
          width: 18%;
          color: #555555 !important;
          font-size: 14px;
          div {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            img {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              margin-right: 10px;
              cursor: pointer;
            }
          }
        }
        td:nth-of-type(1) {
          width: 25%;
        }
      }
      // 商品
      .goodsBox {
        position: relative;
        .position {
          position: relative;
          box-sizing: border-box;
        }
        .goodslist {
          position: absolute;
          z-index: 10;
          right: 0;
          bottom: -43px;
          background: #fff;
          border-radius: 4px;
          border: solid 1px #e5e5e5;
          padding: 5px 0;
          li {
            cursor: pointer;
            box-sizing: border-box;
            max-width: 234px;
            padding: 0 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: #fff;
            font-size: 14px;
            line-height: 30px;
            color: #fd7f2c;
          }
        }
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 4%;
        .goodsBoxImg {
          position: relative;
          cursor: pointer;
          .play {
            width: 30px;
            height: 30px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .img_box {
          width: 50px;
          height: 50px;
          background-color: #f5f5f5;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;

          .leftImg {
            width: 50px;
            height: 50px;
            border-radius: 6px;
          }
          .detail {
            width: 20px;
            height: 18px;
            border-radius: 0;
          }
        }

        .rightBox {
          min-width: 230px;
          flex: 1;
          margin-left: 10px;
          text-align: left;
          div:nth-of-type(1) {
            // display: flex;
            justify-content: flex-start;
            align-items: center;
            text-align: left;

            p {
              width: 215px;
              font-weight: 600;
              font-size: 14px;
              font-stretch: normal;
              //line-height: 15px;
              letter-spacing: 0px;
              color: #222222;
              text-align: left;
            }
          }
          .rightBox-01 {
            width: 215px;
          }
          .overflowTextWl {
            height: 19px;
            cursor: pointer;
          }
          .overflowTextWl:hover {
            color: #fd7f2c;
          }
          .rightBox-1 {
            height: 25px;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
            color: #888888;
            display: flex;
            .goods-text {
              width: 260px;
              cursor: pointer;
              display: inline-block;
              font-size: 14px;
              font-weight: normal;
              letter-spacing: 0px;
              color: #fd7f2c;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .menu {
            width: 10px;
            height: 6px;
            margin-top: 12px;
          }
        }
      }
    }
    .title {
      font-size: 14px;
      font-weight: 600;
      color: #222;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .title:hover {
      color: #fd7f2c;
    }
  }
}
</style>
